<template>
  <div>
    <p-modal
      :visible="visible"
      :title="title"
      :width="1000"
      :z-index="1002"
      :mask-closable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div>
        <p-form-model
          :model="form"
          :rules="rules"
          layout="inline"
          :label-col="{ span: 5 }"
        >
          <p-form-model-item label="姓名">
            <p-input v-model="form.keyword" placeholder="请输入" />
          </p-form-model-item>
          <p-form-model-item label="联系电话 ">
            <p-input v-model="form.mobile" placeholder="请输入" />
          </p-form-model-item>
          <p-button
            type="primary"
            style="margin-left: 20px"
            @click="getList(1)"
          >
            搜索
          </p-button>
          <p-button @click="handleReset">
            重置
          </p-button>
        </p-form-model>
        <p-table
          class="table-list-container"
          row-key="id"
          :scroll="{ x: '100%', y: 'calc(100vh - 450px)' }"
          :columns="columns"
          bordered
          :loading="loading"
          :pagination="SalesTeamPage"
          :row-selection="rowSelectionMixin"
          :data-source="dataSource"
          @change="handleTableChange"
        >
          <a
            slot="name"
            slot-scope="text, record"
            @click="handleNumberClick(record)"
          >
            {{ text }}
          </a>
        </p-table>
      </div>
    </p-modal>
  </div>
</template>

<script>
import { getleadsSalesTeam, postleadsSalesTeam } from '@/api/clue.js';
import { postBusinessSalesTeam } from '@/api/business.js';
import mixinTable from '@/mixins/mixin-table.js';
const defaultForm = {
  keyword: undefined,
  mobile: undefined,
};
export default {
  mixins: [mixinTable],
  props: {
    title: {
      type: String,
      default: '选择销售团队',
    },
    value: {
      type: [String, Number],
      default: undefined,
    },
    index: {
      type: Number,
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    opportunityId: {
      type: [String, Number],
      default: undefined,
    },
    leadsNo: {
      type: [String, Number],
      default: undefined,
    },
  },
  data() {
    return {
      parentId: '1',
      detail: {},
      planId: undefined,
      asc: true,
      form: {
        ...defaultForm,
      },
      sex: '1',
      SalesTeamPage: {
        pageSizeOptions: ['10', '20', '50', '100'],
        showSizeChanger: true,
        current: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '姓名',
          width: 150,
          ellipsis: true,
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          align: 'center',
          title: '部门',
          width: 150,
          ellipsis: true,
          dataIndex: 'departmentName',
        },
        {
          align: 'center',
          title: '职位',
          width: 150,
          dataIndex: 'positionName',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '联系电话',
          width: 150,
          ellipsis: true,
          dataIndex: 'mobile',
        },
        {
          align: 'center',
          title: '性别',
          width: 150,
          ellipsis: true,
          dataIndex: 'sex',
          customRender(t) {
            return t === null ? '-' : t === '1' ? '男' : '女';
          },
        },
        {
          align: 'center',
          title: '邮箱',
          width: 150,
          ellipsis: true,
          dataIndex: 'email',
        },
      ];
      return columns;
    },
  },
  watch: {
    visible: {
      handler(val) {
        val && this.getList();
        val && this.getSelect();
      },
    },
    immediate: true,
  },
  created() {},
  methods: {
    getSelect() {
      const codes = this.list.map(item => item.userId);
      this.rowSelectionMixin.getCheckboxProps = record => {
        return {
          props: {
            disabled: codes.includes(record.uid),
          },
        };
      };
    },
    getSearchForm() {
      const page = {
        pageNo: this.SalesTeamPage.current,
        limit: this.SalesTeamPage.pageSize,
        asc: this.asc,
        column: this.columnKey,
      };
      return {
        ...this.form,
        ...page,
        tenantId: 'geek',
      };
    },
    // 搜索销售列表
    async getList(val) {
      if (val) {
        this.paginationMixin.current = 1;
      }
      const form = this.getSearchForm();
      this.loading = true;
      const result = await getleadsSalesTeam(form).finally(
        () => (this.loading = false)
      );
      this.dataSource = result.data.data?.records;

      this.SalesTeamPage.total = result.data.data?.total;
    },
    // 重置
    handleReset() {
      this.form = { ...defaultForm };
      this.paginationMixin.current = 1;
      this.getList();
    },
    // 选择销售
    async handleOk() {
      const selectedRowKeys = this.rowSelectionMixin.selectedRowKeys || [];
      if (!selectedRowKeys.length) {
        this.$message.info(
          `请选择关联销售，现有 ${selectedRowKeys.length} 条！`
        );
        return;
      }
      const selectedInfos = this.rowSelectionMixin.selectedRows.map(
        (item, i) => {
          return {
            userId: item.uid,
            leadsNo: this.leadsNo,
            opportunityId: this.opportunityId,
            bizType: '1',
          };
        }
      );
      if (this.opportunityId) {
        const res = await postBusinessSalesTeam(selectedInfos);
      } else {
        await postleadsSalesTeam(selectedInfos);
      }
      console.log(this.opportunityId);
      this.$message.success('关联成功');
      this.handleCancel();
    },
    handleCancel() {
      this.$emit('update:visible', false);
      this.rowSelectionMixin.selectedRowKeys = [];
      this.$emit('fresh');
    },
    // 编号点击
    handleNumberClick(record) {
      this.$message.warning('该功能暂未实现！');
    },
    // 分页
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.asc = sorter.order === 'ascend' ? true : false;
      this.columnKey = sorter.columnKey;
      this.SalesTeamPage = page;
      console.log('page:', page);
      this.getList();
      // console.log(this.SalesTeamPage, '------');
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  width: 100%;
  display: flex;
  align-items: center;
  .content {
    display: flex;
    justify-content: center;
    flex: 1;
  }
}
.table-list-container {
  margin-top: 20px;
}
.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 33%;
  margin: 0 30px 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 16px;
}
</style>
